<template>
	<view class="page page-fill">
		<view class="me-header">
			<view v-if="userLoginStatus">
				<image @click="priviewAvatar" class="me-avatar" :src="userInfo.avatar" mode=""></image>
			</view>
			<view v-else>
				<image class="me-avatar" src="../../static/tabbar/my_selected.png" mode=""></image>
			</view>
			
			<view class="me-info" v-if="userLoginStatus">
				<view class="me-name">
					{{userInfo.username}}
				</view>
				<view class="me-id">ID:123ABC456XYZ</view>
			</view>
			<view v-else>
				<navigator url="../regLogin/regLogin">
					<view class="me-name me-login">
						注册/登录
					</view>
				</navigator>
				
			</view>
			
			<view class="me-set" v-if="userLoginStatus">
				<navigator url="./meInfo/meInfo">
					<image src="../../static/tabbar/order.png" class="set-set" mode=""></image>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userLoginStatus: false,
				userInfo : {}
			}
		},
		onShow() {
			var user = uni.getStorageSync('gUser');
			console.log(user)
			if(user) {
				this.userLoginStatus = true;
				this.userInfo = user;
			}else {
				this.userLoginStatus = false;
			}
		},
		methods: {
			priviewAvatar(){
				uni.previewImage({
					urls: [this.userInfo.avatar]
				})
			}
		}
	}
</script>

<style>
	@import url("me.css");
</style>
